<template>
    <div class="barechart" ref="barechart">

    </div>
</template>

<script setup lang="ts">
import * as echarts from'echarts'
import {ref,reactive,onMounted} from 'vue'

const barechart=ref(null)
onMounted(()=>{
    drawBar()
})
const drawBar=()=>{
    let echart=echarts.init(barechart.value)
    const option={
        //提示框
        tooltip:{
            trigger:'axis',
            axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
        },
        //图例
        legend:{
            // right:'5%',
            top:'1%',
            right:'5%',
            itemWidth: 20, // 设置图例项的宽度
            itemHeight: 10, // 设置图例项的高度
            // data:['项目数','通过','不通过'],
            textStyle:{
                color:'#fff',
                fontSize:8,
            }
        },
        //图表位置
        grid:{
            left:'18%',
            top:'8%',
            right:'3%',
            bottom:'10%',
            containlabel:true,
        },
        yAxis:{
            show: true,
          boundaryGap: true,
          type: 'category',
          name: '',
          data: ['城市配网', '农网改造', '大修项目', '技改项目', '业务配套'],
          axisLabel: {
      interval: 0  // 每个刻度都显示标签
    },
          axisTick: {
            show: false  // 隐藏 y 轴的刻度线
        },
          axisLine: {
            show:false,
            lineStyle: {
              color: '#fff'
            }
          }

        },
        xAxis: {
            type:'value',
          show: false
        },
        series:[
            {
                type:'bar',
                name:'通过',
                stack: 'total',
                barWidth:20,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: '#87CEFA' },  // 浅蓝色
        { offset: 1, color: '#1E90FF' }   // 深蓝色
      ]) 
                },
                // barGap:0,
                label:{
                    show:true,
                    position:'top',
                    color:'#fff'
                },
            //     itemStyle: {
            //   normal: {
            //     color: '#F49D4E'
            //     // opacity: 0.6 透明度
            //   }
            // },
            data: ['60','60','60','60','60']
            },
            {
                type:'bar',
                name:'项目数',
                stack: 'total',//让柱子堆叠
                barWidth:20,
                itemStyle: {
                    color: '#ff7979'  // 设置所有柱子的颜色为蓝色
                },
                // barGap:0,
                label:{
                    show:true,
                    position:'top',
                    color:'#fff'
                },
            //     itemStyle: {
            //   normal: {
            //     color: '#F49D4E'
            //     // opacity: 0.6 透明度
            //   }
            // },
            data: ['100','100','100','100','100']
            },
            {
                type:'bar',
                name:'不通过',
                stack: 'total',
                barWidth:20,
                itemStyle: {
                    color: '#fab658'  // 设置柱子的颜色为huangse
                },
                // barGap:0,
                label:{
                    show:true,
                    position:'top',
                    color:'#fff'
                },
            //     itemStyle: {
            //   normal: {
            //     color: '#F49D4E'
            //     // opacity: 0.6 透明度
            //   }
            // },
            data: ['40','40','40','40','40']
            },
        ]
    }
    echart.setOption(option)
    window.addEventListener('resize', ()=>{
    echart.resize();
});
    
}
</script>

<style scoped>
.barechart{
    width:100%;
    height:100%;
    box-sizing: border-box;
    /* color:#fab658 */
}
</style>